<template>
    <div class="paper-class-search-container">
        <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
            <el-form-item
              prop="email"
              label="试卷名称" size="50px"
              :rules="[
              ]">
                <el-input v-model="dynamicValidateForm.name" :style="inputStyle"></el-input>
            </el-form-item>
            <el-form-item
              v-for="(domain, index) in dynamicValidateForm.domains"
              :label="'试卷难度: '"
              :key="domain.key"
              :prop="'domains.' + index + '.value'"
            >
                <el-input v-model="dynamicValidateForm.grade" :style="inputStyle"></el-input>
                <!--<el-button @click.prevent="removeDomain(domain)">删除</el-button>-->
            </el-form-item>
            
            <el-form-item
              v-for="(domain, index) in dynamicValidateForm.domains"
              :label="'试卷状态: '"
              :key="domain.key"
              :prop="'domains.' + index + '.value'"
            >
                <el-input v-model="dynamicValidateForm.status" :style="inputStyle"></el-input>
                <!--<el-button @click.prevent="removeDomain(domain)">删除</el-button>-->
            </el-form-item>
            
            <el-form-item>
                <el-button type="primary" @click="submitForm('dynamicValidateForm')">搜索</el-button>
                <!--<el-button @click="addDomain">新增域名</el-button>-->
                <el-button type="warning" @click="resetForm('dynamicValidateForm')">重置</el-button>
                <el-button type="info" size="medium" @click="routePush('/message')" >添加试卷</el-button>
            </el-form-item>
        </el-form>
        
        <edit-table ref="resultTableData"></edit-table>
        <pagination ref="paging" @vocal="getData"></pagination>
    
    </div>
</template>

<script>
import EditTable from "@c/editTable";
import pagination from "@c/pagination";
import { getData } from "@/utils/Util";

export default {
    name: "paperClassSearch",
    components: { EditTable, pagination },
    
    data() {
        return {
            field_name: null,
            field_type: null,
            field_status: null,
            field_class: null,
            dynamicValidateForm: {
                domains: [{
                    value: ""
                }],
                name: null,
                grade: null,
                status: null
            },
            inputStyle: {
                width: "150px"
            },
            // 测试数据
            tableData: {
                endRow: 5,
                hasNextPage: true,
                hasPreviousPage: false,
                isFirstPage: true,
                isLastPage: false,
                list: {
                    create_man: "undefined",
                    create_time: "2021-12-15 17:37:16",
                    difficulty: 1,
                    id: 1,
                    name: "一年级",
                    paper_class: "语文",
                    paper_grade: "初级",
                    status: false,
                    subject: {},
                    total_score: 100,
                    update_time: "2021-12-16 18:08:09",
                    use_count: 0
                },
                navigateFirstPage: 1,
                navigateLastPage: 8,
                navigatePages: 8,
                navigatePageNums: [1, 2, 3, 4, 5, 6, 7, 8],
                nextPage: 2,
                pageNum: 1,
                pageSize: 5,
                pages: 8,
                prePage: 0,
                size: 5,
                startRow: 1,
                total: 36
            }
        };
    },
    created() {
        // 通过 axios 获取试卷数据
        this.getData(1);
    },
    methods: {
        routePush(url) {
            this.$router.push(url);
        },
        // 获取试卷数据
        getData(pageNum) {
            getData("/paper/paging/" + pageNum + "/8", {
                    paper_class: this.field_class,
                    name: this.dynamicValidateForm.name,
                    paper_grade: this.dynamicValidateForm.grade,
                    status: this.dynamicValidateForm.status
                }).then(resp => {
                // 传递获取到的list内容
                console.log(resp)
                this.$refs.resultTableData.tableData = resp.list;
                this.$refs.paging.pageData = resp;
                sessionStorage.setItem("tableData", JSON.stringify(resp.list));
            });
        },
        submitForm() {
            this.getData(1);
            
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        removeDomain(item) {
            var index = this.dynamicValidateForm.domains.indexOf(item);
            if (index !== -1) {
                this.dynamicValidateForm.domains.splice(index, 1);
            }
        },
        addDomain() {
            this.dynamicValidateForm.domains.push({
                value: "",
                key: Date.now()
            });
        }
    }
};
</script>

<style scoped lang="scss">
    .paper-class-search-container {
        width: 72vw;
        
    }
    
    .demo-dynamic {
        display: flex;
        flex-wrap: wrap;
    }
</style>